import React, { useState, useEffect, useRef } from "react";
import { Button, Divider, Typography } from "antd";

const { Title, Paragraph } = Typography;
import { useNavigate } from "react-router-dom";
import "./index.scss";
// const text =
//   "问卷星专注于打造一个功能强大的问卷平台，采用React与TypeScript技术栈构建问卷调查系统。该系统允许用户通过拖拽组件的方式，轻松自定义问卷内容，从而满足多样化的问卷需求。界面设计简洁直观，用户体验流畅。React的组件化思想使得系统结构清晰，易于维护和扩展。而TypeScript的加入，则进一步提升了代码的可读性和健壮性。无论是简单的满意度调查，还是复杂的学术研究问卷，我们的问卷星平台都能完美胜任。通过拖拽组件，用户可以轻松创建出符合自己需求的问卷，极大地提升了工作效率。";

const start = () => {
  const navigate = useNavigate();
  //打字机效果
  //   const [words, setWords] = useState<string[]>(text.split(""));
  //   const mainRef = useRef<HTMLDivElement>(null);

  //   useEffect(() => {
  //     const write = () => {
  //       if (words.length > 0) {
  //         const span = document.createElement("span");
  //         const dele = words.shift();
  //         let opc = 0;
  //         span.innerHTML = dele || "";
  //         mainRef.current?.appendChild(span);

  //         const fade = setInterval(() => {
  //           opc++;
  //           span.style.opacity = (opc / 10).toString();
  //           span.style.color = "transparent";
  //           span.style.textShadow =
  //             "0 0 5px #57606f, 0 0 10px #57606f, 0 0 4px #57606f, 0 0 12px #ffa502";
  //           span.style.filter = `blur(${10 / opc - 1}px)`;
  //           if (opc >= 10) {
  //             clearInterval(fade);
  //             span.style.color = "#ffffff";
  //           }
  //         }, 50);
  //       }
  //     };

  //     const interval = setInterval(write, 50);
  //     return () => clearInterval(interval);
  //   }, [words]);
  return (
    <div className="Start">
      <Typography rootClassName="typography">
        <Title className="title">问卷调查 | 在线投票</Title>
        {/* <Paragraph className="paragraph" ref={mainRef}></Paragraph> */}
        <Paragraph className="paragraph">
          问卷星专注于打造一个功能强大的问卷平台，采用React与TypeScript技术栈构建问卷调查系统。该系统允许用户通过拖拽组件的方式，轻松自定义问卷内容，从而满足多样化的问卷需求。界面设计简洁直观，用户体验流畅。React的组件化思想使得系统结构清晰，易于维护和扩展。而TypeScript的加入，则进一步提升了代码的可读性和健壮性。无论是简单的满意度调查，还是复杂的学术研究问卷，我们的问卷星平台都能完美胜任。通过拖拽组件，用户可以轻松创建出符合自己需求的问卷，极大地提升了工作效率。
        </Paragraph>
        <Paragraph>
          <Button
            type="primary"
            size="large"
            onClick={() => navigate("/home/manage")}
          >
            开始
          </Button>
        </Paragraph>
      </Typography>
    </div>
  );
};

export default start;
